<template>
  <div class="content">
    <div class="cloud-header">
      <h2>商家活动申请</h2>
    </div>
    <div class="cloud-body">
      <div class="cloud-subset-title">
        <div class="cloud-subset-action">
        </div>
        <!-- <p class="cloud-subset-tips">在开发的场景同，通常一个项目管理多个应用，如微信公众号，微信小程序，数据后台等等公用的一个数据库，此处用于区分不同应用场景<br></p> -->
      </div>
      <Table :datas="datas" :stripe="true" :loading="loading">
        <TableItem title="发起商户">
          <template slot-scope="{data}">
            {{ data.multi[0].title}}
          </template>
        </TableItem>
        <TableItem title="状态">
          <template slot-scope="{data}">
            {{available_state(data.status)}}
          </template>
        </TableItem>
        <TableItem title="提交时间" prop="creation_time"></TableItem>
        <TableItem title="操作" align="center">
          <template slot-scope="{data}">
            <!-- <div v-if="data.status===1 || data.status === 3">------</div> -->
            <button class="h-btn h-btn-no-border" @click="intDetails(data)" >详情</button>
            <button class="h-btn h-btn-no-border" @click="changeStatus(data._id,2)" v-if="data.status===0">确认</button>
            <button class="h-btn h-btn-no-border" @click="changeStatus(data._id,1)" v-if="data.status===2">通过</button>
            <button class="h-btn h-btn-no-border" @click="changeStatus(data._id,3)" v-if="data.status!==1">取消</button>
          </template>
        </TableItem>
        <div slot="empty">暂时无数据</div>
      </Table>
      <Pagination style="margin-top: 20px;" v-model="pagination" align="center" @change="currentChange" small></Pagination>

      <!-- 查看详情 -->
      <Modal v-model="opened" width="420">
        <div slot="header">活动申请详情</div>
        <div class="a-mltiHope-model">
            <div>活动主题：{{ info.title}}</div>
            <div>申请联系人电话：{{ info.mobile}}</div>
            <div>预算：{{ intPrecision(info.budget) }}（元）</div>
            <div>是否接入第三方：{{ info.planning ? '是' : '否'}}</div>
            <div>
              <dt class="a-miltihope-model-item">
                <dl>邀请参与方：</dl>
                <dd v-for="item,index in info.hope_list">{{item.store.name}}</dd>
              </dt>
            </div>
            <div>发起时间：{{info.creation_time}}</div>
            <div>活动状态：{{info.status == 1 ? '已成功' : info.status == 2 ? '已审核' : info.status == 3 ? '已取消' : '待审核'}}</div>
        </div>
        <div slot="footer"></div>
      </Modal>
    </div>
  </div>
</template>
<script type="text/javascript">
// import empty from './empty.vue'
export default {
  components: {
    // empty
  },
  data() {
    return {
      loading: false,
      datas: [],
      //分页数据
      pagination: {
        page: 1,
        size: 10,
        total: 10
      },


      // 详情
      opened:false,
      info:"",
    };
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {

  },
  /**
   * 页面渲染前
   * @return {[type]} [description]
   */
  created() {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
    this.dataCount();
    this.dataList();
  },
  methods: {
    dataList() {
      this.$cloud.view('multi_hope', 'multi', '_uniqueid = uuid').order('_id ASC').page(this.pagination.page, this.pagination.size).select().then(data => {
        console.log('查看', data);
        this.datas = data;
      }).catch(error => {

      });
    },
    dataCount() {
      this.$cloud.name('multi_hope').count().then(res => {
        this.pagination.total = res
      }).catch(error => {

      });
    },
    //分页
    currentChange(value) {
      this.pagination = value
      this.dataList()
    },
    changeStatus(_id, status) {
      this.$cloud.name('multi_hope').where({ _id }).update({ status }).then(res => {
        if (res) {
          this.$Message('操作成功');
          this.dataList();
        } else {
          this.$Message.error('操作失败');
        }

      }).catch(error => {

      });
    },
    available_state(value) {
      switch (value) {
        case 0:
          return '待审核';
        case 1:
          return '已成功';
        case 2:
          return '已审核';
        case 3:
          return '已取消';
      }
    },


    /**
     * 查看活动详情
     * @param  {[type]} value [description]
     * @return {[type]}       [description]
     */
    intDetails(value){
      this.opened = true;
      this.info = value;
      console.log('value',value);
    },

    /**
     * 保留两位小数
     * @return {[type]} [description]
     */
    intPrecision(value){
      let num = Number(value).toFixed(2);
      return  num
    }
  }
};

</script>
<style lang="less" scoped="true">
.a-mltiHope-model{
  border:dashed 1px #dfdfdf;
  padding:0px 20px;
  .h-notify-container{
    width: 420px !important;
  }
  >div{
    border-bottom: solid 1px #dfdfdf;
    line-height: 52px;
    &:last-child{
      border:0px;
      display: flex; 
      justify-content: space-between;
      align-items: center;
    }
    p{
      margin:0px;
    }
  }
  .a-miltihope-model-item{
      line-height: 30px;
      margin: 10px 0;
      dd{
        text-indent: 1em;
      }
  }
}
</style>
